<template>
    <div class="app-container">
        <el-row :gutter="10">
            <el-col :md="24" :lg="4" :xl="4">
                <div style="background:white;border-bottom:1px solid #DFE6EC;border-right:1px solid #DFE6EC" :loading="leftListLoading">
                    <el-input style="margin: 8px 8px;width: 93%;" placeholder="请输入游戏名" v-model="keyWord" class="input-with-select " @keyup.enter.native="searchList">
                        <el-button slot="append" icon="el-icon-search" @click="searchList"></el-button>
                    </el-input>
                </div>
                <el-menu style="height:calc(85vh - 53px);overflow-y:auto" :default-active="defaultClick" @select="handleSelect" :loading="leftListLoading">
                    <el-menu-item v-for="(item,index) in cdkGameList" :key="item.gameId" :index="index.toString()" class="menu_item">
                        <el-image :src="item.iconUrl | parseToFileUrl" style="width: 50px; height: 50px;"></el-image>
                        <span slot="title" style="padding-left: 30px;">{{item.gameName}}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :md="24" :lg="20" :xl="20">
                <div v-if="tableShow" v-loading="rightListLoading">
                    <div style="background:white;height:53px;border:1px solid #DFE6EC;font-size:20px;line-height: 50px;color:#ff5722;font-weight:bold;" align="center">
                        <!-- 处理游戏名为空报错 -->
                        <span v-if="currentGame">{{currentGame.gameName}}【游戏id：{{ currentGame.gameId }}】</span>
                    </div>
                    <el-table :data="cdkTypeList" ref="dataTable" border height="calc(85vh - 53px - 52px)">
                        <el-table-column v-for="item in tableData" :key="item.prop" :prop="item.prop" :label="item.label" align="center" :sortable="item.label == '操作'  ? false : true" :width="item.label == '操作' ? '300px' : ''" :show-overflow-tooltip="true">
                            <!-- table-header-->
                            <template slot="header" slot-scope="scope">
                                <el-button v-if="item.label == '操作'" type="success" size="small" @click="handleAdd(scope)">
                                    新增
                                </el-button>
                                <span v-else>{{ item.label }}</span>
                            </template>
                            <!-- table-body-->
                            <template slot-scope="scope">

                                <template v-if="item.prop == 'validDate'">
                                    <span v-if="scope.row.vaild">{{ scope.row.startDate }} - {{ scope.row.endDate }}</span>
                                    <el-tag v-else type="danger" :disable-transitions="true">已失效</el-tag>
                                </template>

                                <template v-else-if="item.label == '操作'">
                                    <router-link v-if="scope.row.pid != -1" :to="'/cdk/' + scope.row.id">
                                        <el-button type="diy" size="small" style="margin-right: 10px;background-color: #0099ff;color:white;border-color: #1890ff;">
                                            查看
                                        </el-button>
                                    </router-link>

                                    <template v-if="scope.row.vaild">
                                        <el-button type="warning" size="small" @click="handleCreateCdk(scope)">
                                            生成
                                        </el-button>
                                        <el-button type="primary" size="small" @click="handleEdit(scope)">
                                            修改
                                        </el-button>
                                        <!-- <el-button type="danger" size="small" @click="handleDelete(scope)">
                                        删除
                                    </el-button> -->
                                    </template>

                                </template>

                                <span v-else>{{ scope.row[item.prop] }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页-->
                    <template>
                        <div class="block" align="center" style="background-color:#ffffff;padding: 10px;">
                            <el-pagination :current-page.sync="pageInfo.currentPage" :page-sizes="pageInfo.pageSizes" :page-size.sync="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="cdkTypeListNumber">
                            </el-pagination>
                        </div>
                    </template>
                </div>
            </el-col>
        </el-row>
        <!-- 新增修改CDK类弹窗 -->
        <div>
            <el-dialog :title="dialogType =='add' ? '新增' : '修改'" :visible.sync="dialogVisible" width="750px" :close-on-click-modal="false">
                <el-form ref="cdkTypeForm" :model="tableForm" :rules="tableRules" label-width="170px">
                    <el-form-item label="CDK类名称" prop="name">
                        <el-input v-model="tableForm.name" placeholder="请输入CDK类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="绑定渠道" prop="channelId">
                        <el-cascader style="width:100%" v-model="selectedChannelList" :options="channleList" :props="{ multiple: true}" :show-all-levels="false" collapse-tags clearable placeholder="请选择cdkey绑定渠道，单平台可多选"></el-cascader>
                    </el-form-item>
                    <!-- <el-form-item label="CDK生成总数" prop="totalCount">
                        <el-tooltip content="cdkey生成总数量的限制，超出总数量生成的cdkey无效" placement="top-start" >
                            <el-input-number :precision="0" :min="0" v-model="tableForm.totalCount" placeholder="请输入CDK生成总数" style="width:50%"></el-input-number>
                        </el-tooltip>
                    </el-form-item> -->
                    <el-form-item label="该类cdk可用（人/次）" prop="userLimitCount">
                        <el-tooltip content="用户可使用该类cdk的次数" placement="top-start" >
                            <el-input-number :precision="0" :min="0" v-model="tableForm.userLimitCount" placeholder="请输入单用户次数限制" style="width:50%"></el-input-number>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="单条cdk可用（次）" prop="bUseTimes">
                        <el-tooltip content="单条cdkey可被使用的次数，已生成的cdkey不受影响" placement="top-start">
                            <el-input-number :precision="0" :min="0" v-model="tableForm.bUseTimes" placeholder="请输入单条CDK次数限制" style="width:50%"></el-input-number>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="奖励物品" prop="rewardList">
                        <div v-for="(item,index) in tableForm.rewardList" :key="index" style="margin: 5px 0px;">
                            <span>ID:</span>
                            <el-input-number :precision="0" :min="0" v-model="item.goodsid" placeholder="请输入ID" :controls="false" style="margin: 0px 10px;width:30%"></el-input-number>
                            <span>数量:</span>
                            <el-input-number :precision="0" :min="0" v-model="item.count" placeholder="请输入数量" :controls="false" style="margin: 0px 10px;width:30%"></el-input-number>
                            <span v-if="rewardListLength !== 1" style="margin: 0px 10px">
                                <el-button circle @click="delRewardList(index)" icon="el-icon-delete"></el-button>
                            </span>
                            <span v-if="index +1 === rewardListLength" style="margin: 0px 10px">
                                <el-button circle @click="addRewardList" icon="el-icon-plus"></el-button>
                            </span>
                        </div>
                    </el-form-item>
                    <el-form-item label="CDK有效时间" prop="validTime">
                        <el-date-picker v-model="tableForm.validTime" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" style="width:100%">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="备注" prop="desc">
                        <el-input type="textarea" :rows="2" v-model="tableForm.desc" placeholder="请输入备注" resize="none"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="onSubmit" :loading="submitLoading">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        <!-- 生成CDK弹窗 -->
        <div>
            <el-dialog title='生成CDK' :visible.sync="createCdkDialog" width="40%" :close-on-click-modal="false">
                <el-form ref="cdkForm" :model="createCdkTableForm" :rules="createCdkTableRules" label-width="150px">
                    <el-form-item label="CDK类ID" prop="cdkTypeId">
                        <el-input v-model="createCdkTableForm.cdkTypeId" placeholder="请输入CDK类ID" readonly></el-input>
                    </el-form-item>
                    <el-form-item label="CDK前缀" prop="prefix">
                        <el-tooltip content="组成cdkey代码的前半部分，建议长度1-4位之间" placement="top-start" effect="light">
                            <el-input v-model="createCdkTableForm.prefix" placeholder="请输入CDK前缀"></el-input>
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="CDK除前缀长度" prop="lens">
                        <el-tooltip content="生成cdkey代码的后半部分的长度，建议长度在8-32之间" placement="top-start" effect="light">
                            <el-input type="number" :min="0" v-model="createCdkTableForm.lens" placeholder="请输入CDK除前缀长度" :controls="false" style="width:50%"></el-input>
                            <!-- <el-input-number :min="0" v-model="" placeholder="" ></el-input-number> -->
                        </el-tooltip>
                    </el-form-item>
                    <el-form-item label="CDK数量" prop="nums">
                        <el-tooltip content="生成cdkey的条数" placement="top-start" effect="light">
                            <el-input type="number" :min="0" v-model="createCdkTableForm.nums" placeholder="请输入CDK数量" :controls="false" style="width:50%"></el-input>
                            <!-- <el-input-number :min="0" v-model="" placeholder=""></el-input-number> -->
                        </el-tooltip>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="createCdkDialog = false">取 消</el-button>
                    <el-button type="primary" @click="createCdkSubmit" :loading="createCdkSubmitLoading">确定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script>

import { getCdkTypeList, addCdkType, updateCdkType, delCdkType, getChannelList } from "@/api/cdkType";
import { getAuthGameList } from "@/api/game";
import { addCdk } from "@/api/cdk";
import { deepClone } from "@/utils";

export default {
    name: 'CdkTypeIndex',
    data () {
        var checkAge = (rule, value, callback) => {
            value.forEach((v, k) => {
                if (v.goodsid == null || v.count == null) {
                    return callback(new Error('请配置奖励物品'));
                }
            })
            callback();
        };
        var validatePass = (rule, value, callback) => {
            if (this.selectedChannelList.length == 0) {
                return callback(new Error('请绑定渠道'));
            }
            callback();
        };
        return {
            dialogVisible: false,
            createCdkDialog: false,
            createCdkSubmitLoading: false,
            tableShow: false,
            dialogType: "add",
            leftListLoading: false,
            rightListLoading: false,
            dialogVisible: false,
            submitLoading: false,
            rewardListKey: 0,
            cdkGameList: [],
            cdkGameListSearch: [],
            keyWord: "",
            cdkTypeList: [],
            cdkTypeListNumber: null,
            defaultClick: "0",
            pageInfo: {
                pageSize: 50,
                pageSizes: [20, 30, 40, 50],
                currentPage: 1,
            },
            tableForm: {},
            platformChannelList: [],
            channelIdList: [],
            cdkTableForm: {
                name: "",
                gameId: "",
                channelId: [],
                totalCount: "",
                canUseCount: "",
                userLimitCount: "",
                bUseTimes: "",
                rewardList: [],
                desc: "",
                startDate: "",
                endDate: "",
                validTime: [],
            },
            createCdkTableForm: {},
            tableRules: {
                name: [{ required: true, message: "请输入CDK类名", trigger: "blur" }],
                channelId: [{ validator: validatePass, trigger: "blur" }],
                //totalCount: [{ required: true, message: "请配置CDK生成总数", trigger: "blur" }],
                userLimitCount: [{ required: true, message: "请配置单个用户使用数", trigger: "blur" }],
                bUseTimes: [{ required: true, message: "请配置单条CDK使用数", trigger: "blur" }],
                validTime: [{ required: true, message: "请选择有效时间", trigger: "blur" }],
                rewardList: [{ validator: checkAge, trigger: "blur" }],
            },
            tableData: [
                { prop: "id", label: "ID" },
                { prop: "name", label: "名称" },
                //{ prop: "gameId", label: "游戏ID" },
                /* { prop: "channelId", label: "渠道ID" },
                { prop: "totalCount", label: "总条数" },
                { prop: "canUseCount", label: "还能被使用的次数" }, */
                { prop: "userLimitCount", label: "该类cdk可用(次)" },
                { prop: "bUseTimes", label: "单条cdk可用(次)" },
                //{ prop: "rewardList", label: "奖励物品列表" },
                { prop: "validDate", label: "有效时间" },
                { prop: "createUserName", label: "创建人" },
                { prop: "createTime", label: "创建时间" },
                { prop: "desc", label: "备注" },
                { label: "操作" },
            ],
            createCdkTableForm: {},
            cdkTableData: {
                cdkTypeId: null,
                prefix: null,
                lens: null,
                nums: null
            },
            createCdkTableRules: {
                cdkTypeId: [{ required: true, message: "请输入CDK类ID", trigger: "blur" }],
                prefix: [{ required: true, message: "请输入CDK前缀", trigger: "blur" }],
                lens: [{ required: true, message: "请输入CDK前缀长度", trigger: "blur" }],
                nums: [{ required: true, message: "请输入CDK数量", trigger: "blur" }],
            },
            selectedChannelList: [],
            channleList: [],
            pickerOptions: {
                disabledDate (v) {
                    return v.getTime() < (new Date().getTime() - 86400000)
                },
                shortcuts: [{
                    text: '一周',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '一个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '三个月',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '半年',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 180);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '一年',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 365);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '两年',
                    onClick (picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(end.getTime() + 3600 * 1000 * 24 * 730);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    watch: {
        pageInfo: {
            deep: true,
            handler () {
                this.getAjax()
            }
        },
        selectedChannelList: function (val, oldval) {
            let nIndex = val.findIndex(v => {
                return v[0] == "all"
            })
            let oIndex = oldval.findIndex(v => {
                return v[0] == "all"
            })
            if (nIndex != -1 && oIndex == -1 && val.length > 1) {
                this.selectedChannelList = [["all", "all"]];
            } else if (nIndex != -1 && oIndex != -1 && val.length > 1) {
                this.selectedChannelList = val.filter(v => {
                    return v[0] != "all"
                })
            }
        },
    },
    mounted () {
        this.getAuthGameList()
    },
    computed: {
        rewardListLength () {
            return this.tableForm.rewardList.length
        },
        currentGame(){
            return this.cdkGameList[this.defaultClick]
        }
    },
    methods: {
        //拿到列表数据
        async getAuthGameList () {
            this.leftListLoading = true;
            try {
                let res = await getAuthGameList()
                this.cdkGameList = res.data ? deepClone(res.data) : [];
                this.cdkGameListSearch = deepClone(this.cdkGameList)
                this.leftListLoading = false;

                if (this.cdkGameList.length > 0) {
                    // 存在数据则默认第一条
                    this.handleSelect(0)
                }


            } catch (err) {
                console.log(err)
                this.leftListLoading = false;
            }
        },
        //列表点击
        async handleSelect (index) {
            this.defaultClick = index.toString()
            this.pageInfo.currentPage = 1 //初始化当前页页数
            this.getAjax()
        },
        async getAjax () {
            this.tableShow = true
            this.rightListLoading = true;
            try {
                let params = {
                    gameId: this.currentGame.gameId,
                    page: this.pageInfo.currentPage,
                    limit: this.pageInfo.pageSize
                }
                let res = await getCdkTypeList(params)
                const tempList = res.data.results || [];

                const now = new Date().getTime() // 当前时间戳
                this.cdkTypeList = tempList.map(data => {

                    // ios 不兼容 new Date(data.endDate)
                    const nDate = data.endDate.replace(/-/g,'/')
                    if (new Date(nDate) - now > 0) {
                        // 还未失效
                        data.vaild = true
                    } else {
                        // 已经失效
                        data.vaild = false
                    }
                    return data
                })

                this.cdkTypeListNumber = res.data.counts

                this.$refs.dataTable.doLayout()
                this.$refs.dataTable.bodyWrapper.scrollTop = 0

                this.rightListLoading = false;
            } catch (err) {
                console.log(err)
                this.rightListLoading = false;
            }
        },
        //获取所有平台渠道列表
        async getChannelList () {
            this.channelIdList = []
            try {
                let res = await getChannelList()
                res.data ? res.data : []
                this.channleList = this.generateGameList(res.data)
            } catch (err) {
                console.log(err)
            }
        },
        generateGameList (temp) {
            let res = []
            let map = {}
            temp.forEach(t => {
                if (!map[t.platform]) {
                    map[t.platform] = []
                }
                map[t.platform].push({
                    label: t.channelName,
                    value: t.copChannelId
                })
                // let data = { value: v.id, label: v.channelName }
                this.channelIdList.push(t.id)
                // this.platformChannelList.push(data)
            });
            Object.keys(map).forEach(key => {
                res.push({
                    label: key,
                    value: key,
                    children: map[key]
                })
            })
            res = res.sort()
            res.unshift({
                label: "全部",
                value: "all",
                children: [{
                    label: "全部",
                    value: "all",
                }]
            })
            return res.sort()
        },
        setNewForm () {
            this.tableForm = JSON.parse(JSON.stringify(this.cdkTableForm))
            this.createCdkTableForm = JSON.parse(JSON.stringify(this.cdkTableData))
        },
        //处理新增
        handleAdd () {
            // 没有选择游戏
            if (!this.currentGame.gameId) return
            this.selectedChannelList = []
            this.setNewForm()
            this.getChannelList()
            this.tableForm.rewardList.push({ "goodsid": null, "count": null })
            this.tableForm.gameId = this.currentGame.gameId
            this.dialogType = 'add'
            this.dialogVisible = true
        },
        //处理生成CDK
        handleCreateCdk (scope) {
            this.setNewForm()
            this.createCdkDialog = true
            this.createCdkTableForm.cdkTypeId = scope.row.id
        },
        //处理修改
        handleEdit (scope) {
            this.selectedChannelList = []
            this.setNewForm()
            this.tableForm = JSON.parse(JSON.stringify(scope.row))
            //处理渠道数据回显
            if (this.tableForm.channelId.isAll == true) {
                this.selectedChannelList = [["all", "all"]];
            } else {
                this.tableForm.channelId.android.forEach(b => {
                    this.selectedChannelList.push(["Android", b])
                })
                this.tableForm.channelId.h5.forEach(b => {
                    this.selectedChannelList.push(["H5", b])
                })
                this.tableForm.channelId.ios.forEach(b => {
                    this.selectedChannelList.push(["IOS", b])
                })

            }
            this.getChannelList()

            //处理有效时间回显
            this.$set(this.tableForm, "validTime", [new Date(Date.parse(scope.row.startDate)), new Date(Date.parse(scope.row.endDate))])
            this.dialogType = "edit"
            this.dialogVisible = true
        },
        //处理删除
        handleDelete (scope) {
            this.$confirm("确认删除?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    this.submitLoading = true
                    let params = { id: scope.row.id }
                    await delCdkType(params)
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    })
                    this.dialogVisible = false
                    this.submitLoading = false
                    await this.getAuthGameList()
                })
                .catch(() => { });
        },
        //添加奖励物品
        addRewardList () {
            this.tableForm.rewardList.push({ "goodsid": null, "count": null })
        },
        //删除奖励物品
        delRewardList (index) {
            this.tableForm.rewardList.splice(index, 1)
        },
        //生成cdk
        createCdkSubmit () {

            this.$refs.cdkForm.validate(async (valid) => {

                if (valid) {
                    this.createCdkSubmitLoading = true
                    try {
                        let params = {
                            cdkTypeId: this.createCdkTableForm.cdkTypeId,
                            prefix: this.createCdkTableForm.prefix,
                            lens: this.createCdkTableForm.lens,
                            nums: this.createCdkTableForm.nums
                        }
                        await addCdk(params)
                        this.$message({
                            type: "success",
                            message: "添加成功"
                        })
                        this.createCdkDialog = false
                    } catch (err) {
                        console.log(err);
                    }
                    this.createCdkSubmitLoading = false
                }
            })
            //只刷新当前选择的游戏
            this.handleSelect(this.defaultClick)
        },
        //提交表单
        onSubmit () {
            this.$refs.cdkTypeForm.validate(async (valid) => {
                if (valid) {
                    this.submitLoading = true
                    let params = {}
                    let channelData = {
                        isAll: false,
                        h5: [],
                        android: [],
                        ios: []
                    }
                    //处理渠道上传的数据
                    this.selectedChannelList.forEach(v => {
                        switch (v[0]) {
                            case "H5":
                                channelData.h5.push(v[1].toString())
                                break
                            case "Android":
                                channelData.android.push(v[1].toString())
                                break
                            case "IOS":
                                channelData.ios.push(v[1].toString())
                                break
                            default:
                                channelData.isAll = true
                                return
                        }
                    })
                    //奖励物品id转number
                    if (this.tableForm.rewardList) {
                        this.tableForm.rewardList.forEach((v, k) => {
                            this.tableForm.rewardList[k].goodsid = parseInt(v.goodsid)
                            this.tableForm.rewardList[k].count = parseInt(v.count)
                        })
                    }
                    if (this.dialogType == 'add') {
                        params = {
                            name: this.tableForm.name,
                            gameId: this.tableForm.gameId,
                            channelId: JSON.stringify(channelData),
                            //totalCount: this.tableForm.totalCount,
                            totalCount: 1, // 参数没用 默认1
                            userLimitCount: this.tableForm.userLimitCount,
                            bUseTimes: this.tableForm.bUseTimes,
                            rewardList: JSON.stringify(this.tableForm.rewardList),
                            desc: this.tableForm.desc,
                            startDate: this.formatDateTime(this.tableForm.validTime[0]),
                            endDate: this.formatDateTime(this.tableForm.validTime[1]),
                        }
                        console.log(params);
                        try {
                            await addCdkType(params)
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            })
                            this.dialogVisible = false
                            //只刷新当前选择的游戏
                            await this.handleSelect(this.defaultClick)
                        } catch (err) {
                            console.log(err)
                            //TODO handle the exception
                        }
                        this.submitLoading = false

                    } else {
                        params = {
                            id: this.tableForm.id,
                            name: this.tableForm.name,
                            gameId: this.tableForm.gameId,
                            channelId: JSON.stringify(channelData),
                            totalCount: this.tableForm.totalCount,
                            userLimitCount: this.tableForm.userLimitCount,
                            bUseTimes: this.tableForm.bUseTimes,
                            rewardList: JSON.stringify(this.tableForm.rewardList),
                            desc: this.tableForm.desc,
                            startDate: this.formatDateTime(this.tableForm.validTime[0]),
                            endDate: this.formatDateTime(this.tableForm.validTime[1]),
                        }
                        console.log(params)
                        try {
                            await updateCdkType(params)
                            this.$message({
                                type: "success",
                                message: "修改成功"
                            })
                            this.dialogVisible = false
                            //只刷新当前选择的游戏
                            await this.handleSelect(this.defaultClick)
                        } catch (err) {
                            console.log(err)
                            //TODO handle the exception
                        }
                        this.submitLoading = false
                    }
                }
            })
        },
        //搜索
        searchList () {
            let keyWord = this.keyWord;
            this.cdkGameList = this.cdkGameListSearch.filter(
                (route) => route.gameName.indexOf(keyWord) != -1
            );
            //清空表格
            this.defaultClick = null
            this.cdkTypeList = []
        },

        //格式化时间
        formatDateTime (date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            minute = minute < 10 ? ('0' + minute) : minute;
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        },

    },
}
</script>

<style scoped>
.el-header,
.el-footer {
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
    padding: 0px;
    padding-right: 30px;
    line-height: 200px;
}

.el-main {
    color: #333;
    padding: 0px;
    line-height: 160px;
}

body > .el-container {
    margin-bottom: 40px;
}
.menu_item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
.el-button--diy:hover {
    background-color: #51a2f3 !important;
    border-color: #51a2f3 !important;
    color: #fff;
}
</style>
